<template>
  <div>
    <el-dialog
      width="600px"
      v-model="data.visible"
      :title="data.title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form v-loading="data.loading" :model="inputForm" ref="ruleFormRef" label-width="120px" :disabled="data.method == 'view'">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="应用名称：" prop="name" :rules="[{ required: true, message: '请输入应用名称', trigger: 'blur' }]">
              <el-input v-model="inputForm.name" placeholder="请输入应用名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="应用编码：" prop="code" :rules="[{ required: true, message: '请输入应用编码', trigger: 'blur' }]">
              <el-input v-model="inputForm.code" placeholder="请输入应用编码" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="appid：" prop="appid" :rules="[{ required: true, message: '请输入appid', trigger: 'blur' }]">
              <el-input v-model="inputForm.appid" placeholder="请输入appid" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="应用平台：" prop="appType" :rules="[{ required: true, message: '请输入应用平台', trigger: 'blur' }]">
              <el-select v-model="inputForm.appType" placeholder="请选择平台" disabled>
                <el-option label="app" value="app" />
                <el-option label="web" value="web" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="应用描述：" prop="description" :rules="[]">
              <el-input v-model="inputForm.description" placeholder="请输入应用描述" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.visible = false">取消</el-button>
          <el-button type="primary" @click="doSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import type { FormInstance } from 'element-plus'

let data = reactive({
  visible: false,
  loading: false,
  title: '',
  method: ''
})
let inputForm = ref({
  id: '',
  appid: '', // 应用id
  name: '',
  code: '',
  appType: 'app',
  description: ''
})
let ruleFormRef = ref<FormInstance>()

const init = async (method: string, id: string) => {
  reset()
  data.method = method
  inputForm.value.id = id
  if (method == 'add') {
    data.title = '新增应用'
  } else if (method == 'edit') {
    data.title = '编辑应用'
  } else if (method == 'view') {
    data.title = '查看应用'
  }
  data.visible = true
  nextTick(() => {
    if(method == 'edit' || method == 'view') {
      // 回显...
    }
  })
}
// 表单提交
const doSubmit = () => {
  if(!ruleFormRef.value) return
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      
    }
  })
}

// 初始化
function reset() {
  inputForm.value = {
    id: '',
    appid: '', // 应用id
    name: '',
    code: '',
    appType: 'app',
    description: ''
  }
}

defineExpose({ init })
</script>